<template>
	<view>
		<u-navbar :is-back="true" title="选择商品" :background="background"></u-navbar>
		<view class="content">
			<view>
				<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false" swiperWidth="750" bg-color="transparent"></u-tabs-swiper>
				<view class="searchBox">
          <view class="search-wrapper">
            <u-search v-model="listQuery.goodsServerName" :show-action="false" bg-color="#fff" height="70"
                      placeholder="请输入商品名称" shape="square" @search="search"></u-search>
          </view>
        </view>
				<view class="list">
					<u-empty v-if="!stopList.length" mode="list"></u-empty>
					<scroll-view
					  scroll-y="true"
					  style="height: 60vh;"
					  @scrolltolower="handleScrolltolower">
						<view class="item boxShadow formBox" v-for="(item,index) in stopList" :key="index">
							<view class="item-title">
								商品名称：{{item.goodsServerName}}
							</view>
							<view>库存：{{item.surplusNumber}} 使用方式：{{item.useWayStr}}</view>
							<view class="pric">商品售价：{{item.costPrice}}</view>
							<view class="checkbox">
								<u-checkbox :size="50" @change="checkboxChange(index, item.checkbox, item.gsId)" v-model="item.checkbox" size="50"></u-checkbox>
							</view>
						</view>
						<u-loadmore :status="status" :margin-bottom="20"/>
					</scroll-view>
				</view>
			</view>
		</view>
		<u-popup mode="bottom" v-model="show" :closeable="true" border-radius="26">
			<scroll-view scroll-y="true" style="height: 900rpx;padding: 40rpx 0;box-sizing: border-box;" class="">
				<view class="list">
					<u-empty v-if="!selectList.length" mode="list" style="margin-top: 200rpx;"></u-empty>
					
						<view class="item boxShadow" v-for="(item, index) in selectList" :key="item.gsId">
							<view class="f-c-fs">
								<!-- <view class="color color1" :class="'color' + item.storeType">{{ item.storeTypeStr }}</view> -->
							</view>
							<view class="item-title f-c-sb">
								<view>{{item.goodsServerName}}</view>
								<u-checkbox :size="50" @change="checkboxChange1(index, item.checkbox, item.gsId)" v-model="item.checkbox"></u-checkbox>
							</view>
							<view class="info">{{ item.modelName }}</view>
						</view>
						
				</view>
			</scroll-view>
		</u-popup>
		<view class="btn-wrapper f-c-sa">
			<view class="text" @click="show = true">
				已选：{{ selectList.length }}个商品
				<u-icon name="arrow-up" color="#333" size="32"></u-icon>
			</view>
			<view class="btn" @click="goBack">确认</view>
		</view>
	</view>
</template>

<script>
import {findGoods} from '@/api/index.js'
import {mapGetters} from 'vuex'

export default {
  data() {
    return {
      show: false,
      background: {
        backgroundColor: "#fff"
      },
      tabindex: 1,
      list: [
        {
          name: '套餐',
          value: 60,
          type: 'status'
        },
        {
          name: '卡卷',
          value: 61,
          type: 'status'
        },
        {
          name: '实物',
          value: 59,
          type: 'delFlag'
        }
				],
				current:0,
				listQuery: {
          pageNo: 1,
          pageSize: 20,
          noData: true,
          goodsType: 60,
          goodsServerName: ''
        },
				status: 'loadmore',//初始加载状态
				state: 1, //请求状态修改：1，可请求；2，不可请求
				stopList:[],
				selectList:[]
			};
		},
		computed:{
			...mapGetters(["userInfo","selectShop"]),
		},
		
		onLoad() {
			this.init()
		},
		methods:{
			tabsChange(index) {
				console.log(index, this.current);
				if (this.current != index) {
          this.current = index;
          this.listQuery.goodsType = this.list[index].value;
          this.listQuery.pageNo = 1;
          this.listQuery.noData = true;
          this.getlist();
        }
			},
			init() {
				this.getlist();
				this.selectList=this.selectShop;
			},
			checkboxChange(index, status, gsId) {
				console.log(index, status, gsId);
				if (!status) {
					this.selectList.push(this.stopList[index]);
				} else {
					this.selectList.forEach((val, index) => {
						if (val.gsId == gsId) {
							this.selectList.splice(index, 1);
						}
					});
				}
			},
			checkboxChange1(index, status, gsId) {
				this.selectList.splice(index, 1);
				this.stopList.forEach((val, index) => {
					if (val.gsId == gsId) {
						this.stopList[index].checkbox = false;
					}
				});
			},
			checkList() {
				this.stopList.forEach((val, index) => {
					this.selectList.forEach((val1, index1) => {
						if (val.gsId == val1.gsId) {
							this.stopList[index].checkbox = true;
						}
					});
				});
			},
			getlist() {

				findGoods(this.listQuery).then(res => {
					console.log(res);
					if (this.listQuery.pageNo == 1) {
						this.stopList = res.data;
					} else {
						this.stopList = this.stopList.concat(res.data);
					}
					this.stopList.forEach((val, index) => {
						console.log(this.stopList);
						this.selectList.forEach((vals,indexs)=>{
							if(val.gsId==vals.gsId){
								val.checkbox = true;
							}
						})
					});
					this.checkList();
					this.listQuery.pageNo += 1;
					if (this.listQuery.pageSize != res.data.length) {
						this.listQuery.noData = false;
					}
				});
			},
			//  滚动到底部触发加载更多数据
			handleScrolltolower() {
			   this.status = 'loading';//滑到底部的时候显示状态为加载中~
			   this.state=1
			   this.listQuery.pageNo++;
			   console.log(this.listQuery.pageNo,'page');
			   this.getlist();//调用数据请求
			   
			},
			goBack(){
				var pages = getCurrentPages(); // 获取页面栈
				var currPage = pages[pages.length - 1]; // 当前页面
				var prevPage = pages[pages.length - 2]; // 上一个页面
				prevPage.setData({
					selectList: this.selectList
				})
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		padding-top: 20rpx;
		.searchBox{
			width: 680rpx;
			margin:20rpx auto;
		}
		.formBox {
			padding: 0 0 20rpx 0;
			.tab-wrapper {
				width: 100%;
				view {
					width: 350rpx;
					height: 98rpx;
					background: #eaf3ff;
					font-size: 24rpx;
					font-weight: 700;
					text-align: left;
					color: #177fff;
					text-align: center;
					line-height: 98rpx;
					&.active {
						font-size: 30rpx;
						background-color: #fff;
					}
				}
			}
			.search-wrapper {
				width: 100%;
				padding: 20rpx;
				box-sizing: border-box;
			}
		}
	}
	.list {
		width: 100%;
		margin-bottom:140rpx;
		.item {
			position:relative;
			width: 660rpx;
			background: #ffffff;
			border-radius: 18rpx;
			margin: 23rpx auto;
			padding: 20rpx;
			box-sizing: border-box;
			.color {
				width: 110rpx;
				height: 36rpx;
				opacity: 1;
				background: #177fff;
				border-radius: 6rpx;
				font-size: 24rpx;
				font-weight: 700;
				text-align: center;
				color: #ffffff;
				line-height: 36rpx;
				margin-right: 18rpx;
				&.color1 {
					background: #177fff;
				}
				&.color2 {
					background: #ff6738;
				}
				&.color3 {
					background: #f54170;
				}
				&.color4 {
					background: #2db2ad;
				}
			}
		}
		.item-title {
			font-size: 32rpx;
			color: #444;
			line-height: 70rpx;
		}
		.pric,.storeName{
			font-size: 28rpx;
			color: #666;
			line-height: 60rpx;
		}
		.info {
			font-size: 24rpx;
			font-weight: 500;
			color: #666666;
			line-height: 36rpx;
		}
		.checkbox{
			position:absolute;
			right:10rpx;
			top:50%;
			transform: translateY(-50%);
		}
	}
	
	.btn-wrapper {
		width: 100%;
		height: 140rpx;
		background: #ffffff;
		position: fixed;
		left: 0;
		bottom: 0;
		.text {
			font-size: 32rpx;
			font-weight: 700;
			color: #177fff;
		}
		.btn {
			width: 410rpx;
			height: 100rpx;
			background: #177fff;
			border-radius: 50rpx;
			text-align: center;
			line-height: 100rpx;
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
			color: #ffffff;
			line-height: 100rpx;
		}
	}
</style>
